<template>
  <div style="width: 100%; height: 100%; background-color: rgba(241, 241, 241, 1); overflow: visible; ">
    <h3 style="padding: 15px; background-color: #383838; color: #fff; ">问卷清单</h3>
    <a-spin :spinning="loading">
      <div style="padding: 15px; ">
        <h4>个人问卷</h4>
        <a-row type="flex" v-for="(item, index) in dataList" :key="index" style="background-color: #fff; padding: 10px; margin: 10px 0;">
          <a-col :span="16">
            {{ item.questionTopic }}
          </a-col>
          <a-col :span="8" style="text-align: right">
            <span v-if="item.completeStatus === 0" style="color: #FF8D1A">未评估</span>
            <span v-else-if="item.completeStatus === 1" style="color: #87d068">已评估</span>
            <span v-else-if="item.completeStatus === 2" style="color: #108ee9">评估中</span>
          </a-col>
          <a-col :span="24" style="text-align: right; margin-top: 10px">
            <a-button style="background-color: #383838; color: #fff" @click="toAssess(item.questionId)">开始评估</a-button>
          </a-col>
        </a-row>
      </div>
    </a-spin>
    <div :style="{
          position: 'fixed',
          right: 0,
          bottom: 0,
          width: '100%',
          // borderTop: '1px solid #e9e9e9',
          // padding: '10px 16px',
          background: '#fff',
          textAlign: 'right',
          zIndex: 1,
        }">
      <a-button-group style="width: 100%; height: 40px; ">
        <a-button type="link" style="width: 50%; height: 100%; background-color: #E5E5E5; color: #505050"
                  @click="getList">问卷清单
        </a-button>
        <a-button type="link" style="width: 50%; height: 100%; background-color: #E5E5E5; color: #505050"
                  @click="goLogout">退出登录
        </a-button>
      </a-button-group>
    </div>
  </div>
</template>

<script>
import { mapActions } from 'vuex'
import store from '@/store'
import { getAction } from '@/api/manage'

export default {
  name: "own-list",
  data () {
    return {
      loading: false,
      dataList: [],
      url: {
        list: '/question/getOwnQuestionList'
      }
    }
  },
  created () {
    this.getList()
  },
  methods: {
    ...mapActions(["Logout"]),
    getList () {
      this.loading = true
      let mobile = store.getters.userInfo.mobile
      getAction(this.url.list, { mobile: mobile }).then(res => {
        this.loading = false
        if (!res.success) {
          return this.$message.error(res.message)
        }
        this.dataList = res.result
      }).catch(() => {
        this.loading = false
      })
    },
    goLogout () {
      const that = this
      that.Logout({}).then(() => {
        // window.location.reload()
        window.location.href = '/360renliceping/mobile/login'
      }).catch(err => {
        that.$message.error('错误')
      })
    },
    toAssess (questionId) {
      this.$router.push({ path: '/mobile/selected-user-list', query: { questionId: questionId } })
    }
  }
}
</script>

<style scoped>

</style>
